<!DOCTYPE html>
<html>

<head lang="en">
    <title>提问详情</title>
    <meta charset="utf-8"/>
    <link href="/css/font/mobile+css+head_mobile+css+ui%5Eyvw%5E1526627473.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <!--<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>-->
    <script src="/js/common.js"></script>

    <script>
        $(function (){
            var params = getParams();

                //当前页
                var currentPage = 1;

                //最大页数
                var pages;

                //合并数组
                var travelArr = [];

                function query() {
                    $.get('/questions/'+params.id,{currentPage:currentPage},function (data) {
                        $('.container').renderValues(data,{
                            getHref:getHref
                        })
                    })
                    $.get('/questions/count/'+params.id,function (data) {
                        $('.count').renderValues({count:data},{
                            getHref:getHref
                        })
                    })
                    $.get('/questions/QuestionAndComment/'+params.id,{currentPage:currentPage},function (data) {
                        console.log(data);
                        $.merge(travelArr,data.list)
                        $('.askComment').renderValues({list:travelArr},{
                        getHref:getHref
                        })
                        pages=data.pages;
                    })
                    currentPage = currentPage + 1;
                }
                query();

                $(window).scroll(function () {
                    if ($(document).scrollTop()+$(window).height()+5>=$(document).height()){
                        if (currentPage<=pages){
                            query();
                        }else {
                            $(document).dialog({
                                type : 'notice',
                                infoText: '已经到达底部了',
                                autoClose: 2500,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }
                });

                $('#btn').click(function () {
                    $('#commendModal').modal("show")
                })

                $('.btn-submit').click(function () {
                    $('#editForm').ajaxSubmit(function (data) {

                        successAlert(data);
                    })
                })

                $('#send').click(function () {
                    var content=$("#content").val();
                    var user = JSON.parse(sessionStorage.getItem("user"));
                    if(user){
                        $.post('/questions',{
                            content:content,
                            "question.id":params.id,
                            "user.id":user.id
                        },function (data) {
                            window.location.reload();
                        })
                    }else{
                        window.location.href="login.html";
                    }
                })
        })
    </script>

</head>

<body>
<div id="pos38"></div>
<header class="MfwHead">
    <div class="LBtn">
        <a class="btn back"
           href="javascript:void(window.history.length > 1 ? window.history.back() : document.location.href='index.html')"
           id="_j_top_history_back"><img src="/img/back.jpg" height="40px" width="40px"></a>
    </div>
    <div class="CBtn"><h1>提问详情</h1></div>
    <div class="RBtn">
    </div>
</header>

<div id="content_container">

<div class="comment" id="askQuestion">
    <div class="container">
        <div class="row">
            <div class="col-2 comment-head">
                <a data-href="userProfiles.html?id=" render-key="user.id" render-fun="getHref">
                    <img class="rounded-circle" render-src="user.headImgUrl">
                </a>
                <button class="btn" id="followBtn"><i class="fa fa-hand-o-right"> </i> 关注</button>
            </div>
            <div class="col">
                <span class="comment-star" render-html="user.nickName"></span>
                <span class="comment-date" render-html="createTime"></span>
                <div class="comment-content">
                    <h5 render-html="problem"></h5>
                    <img render-src="coverUrl" style="width: 80%">
                    <p render-html="trouble"></p>
                </div>
            </div>
        </div>
    </div>

    <div class="count d-flex justify-content-between">
        <div class="p-2">评论<span render-html="count"></span></div>
        <!-- <div class="p-2"><i class="fa fa-thumbs-o-up" id="likeBtn"></i><span id="praiseCount">0</span>
             &lt;!&ndash; render-html="praiseCount"&ndash;&gt;
         </div>-->
    </div>
</div>

<div class="askComment">
    <div render-loop="list">
        <div>
            <div class="container">
                <br/>
                <div class="row">
                    <div class="col-2 comment-head">
                        <a data-href="userProfiles.html?id=" render-key="list.user.id" render-fun="getHref">
                            <img class="rounded-circle" render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="col">
                        <span class="comment-star" render-html="list.user.nickName"></span>
                        <span class="comment-date" render-html="list.answerTime"></span>
                        <div class="comment-content">
                            <p render-html="list.content"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="count d-flex justify-content-between" style="height: 2px">
            </div>
        </div>
    </div>
</div>

</div>
<div>
    <br/>
    <br/>
</div>

<div class="operation">
    <div class="d-flex justify-content-between">
        <div class="p-2 commenting" style="text-align: center;width: 100%;position: relative;background:#fdb92c">
            <i class="fa fa-commenting-o" style="width: 20px;position: absolute;left:3%;top: 30%;color: white"></i>
            <div id="userQuestion">
            <textarea style="width: 80%;height: 30px;font-size: 10px;text-align: left"
                      class="form-control-lg" placeholder="说出你的建议" id="content"></textarea>
                <i style="position: absolute;top:27%;left:90%;color:white" id="send">回复</i>
            </div>
        </div>
    </div>
</div>

</body>
<style>
</style>
</html>